﻿<template>
  <div tabindex="0"
       class="doc-element"
       @click.stop="allowed && clickDoc($event)"
       @keydown.enter="allowed && clickDoc($event)"
       :id="dialogDocumentId">
    <div :class="['doc-element-content text-color1',
          document.isSelected ? 'selected-doc' : '',
          !allowed ? 'doc-element-disable' : '',
          ]"

         :draggable="!isFolder"
         @dragstart="dragstart"
         @dragend="dragend"
    >
      <div class="doc-indent" v-for="n in (indent - 1)" :key="n"></div>
      <div class="doc-indent" style="padding-left: 3px;">
        <i v-if="document.type === 'FolderDocument' && partialSubList.length > 0"
           style="cursor: pointer;"
           :class="['fa', !collapse ? 'fa-angle-down' : 'fa-angle-right']"
           @click.stop="collapse = !collapse"/>
      </div>
      <div class="preview-img-wrap">
        <img class="image" src="/image/yellowFolder.svg" width="32">
      </div>
      <div class="doc-info ml-1">
        <span v-if="!isSearched" :title="document.name">{{document.name}}</span>
        <span v-else :title="document.name">
          {{document.name.slice(0, document.name.toLowerCase().indexOf(searchText.toLowerCase()))}}<b>{{document.name.slice(document.name.toLowerCase().indexOf(searchText.toLowerCase()), document.name.toLowerCase().indexOf(searchText.toLowerCase()) + searchText.length)}}</b>{{document.name.substr(document.name.toLowerCase().indexOf(searchText.toLowerCase()) + searchText.length)}}
        </span>
      </div>
    </div>
    <div v-if="isFolder && !collapse">
      <dialog-document v-for="subDoc in partialSubList"
                       :key="subDoc.id+updateKey"
                       :document="subDoc"
                       :searchText="searchText"
                       :allowed="allowed"
                       :document-list="documentList"
                       :indent="indent + 1"
                       :allowSelectedFolder="allowSelectedFolder"
                       @docClicked="popClick"/>
      <div v-if="nextPage" class="nextPage" @click.stop="loadMore">
        <div class="item-indent" v-for="n in (indent + 1)" :key="n"></div>
        <span class="nextPageText">{{$t('message.DocumentList.loadMore')}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { eventBus } from "../../../eventbus/eventbus";
import {
  DocumentType
} from "../../../../nodeApp/static/lib/crowncad-plugin-sdk-0.0.1";

let IdCount = -1;
export default {
  name: "dialog-document",
  props: {
    document: Object,
    searchText: String,
    allowed: Boolean,
    documentList: {
      type: Array,
      default: []
    },
    indent: {
      type: Number,
      default: 1
    },
    allowSelectedFolder: {
      type: Boolean,
      default: true
    }
  },
  data() {
    IdCount++;
    return {
      collapse: true,
      partialSubList: [],
      subList: [],
      pagination: {
        pageSize: 50,
        currentPage: 1
      },
      dialogDocumentId: 'dialogDocument' + IdCount,
      updateKey: 0,
    }
  },
  mounted() {
    // 每次search都会更新外层key，内层需要重置IdCount，重新渲染
    this.cbId = eventBus.on('resetIdCount', () => {
      IdCount = -1;
    });
    // setTabFocusStyle($('#' + this.dialogDocumentId), TabFocusColorsType.LIST);
    // 展开路径
    this.dcId = eventBus.on("dialogDocument", (docId) => {
      if (docId === this.document.id) {
        this.collapse = false;
      }
    });
  },
  methods: {
    dragstart() {
      eventBus.emit('dialogDocumentDragstart', this.document);
    },
    dragend() {
      eventBus.emit('dialogDocumentDragend');
    },
    loadMore() {
      this.pagination.currentPage += 1;
      this.calSubList((this.pagination.currentPage - 1) * this.pagination.pageSize, this.pagination.currentPage * this.pagination.pageSize);
    },
    updateSubList(){
      if (!this.isFolder) {
        return;
      }
      this.partialSubList = [];
      this.getSubList();
      // 获取到上次加载的地方
      this.calSubList(0, this.pagination.currentPage * this.pagination.pageSize);
    },
    getSubList(){
      let list = [...this.documentList.filter(doc => doc.folderCode === this.document.id)];
      this.subList = list;
    },
    calSubList(startIndex, endIndex) {
      let list = this.subList.slice(startIndex, endIndex);
      this.partialSubList.push(...list);
    },
    clickDoc(event) {
      if (this.document.type === DocumentType.FOLDER && !this.allowSelectedFolder) {
        this.collapse = !this.collapse;
      } else {
        this.$emit("docClicked", this.document, event);
      }
    },
    popClick(subDoc, event) {
      this.$emit("docClicked", subDoc, event);
    },
  },
  computed: {
    isSearched() {
      if (this.document.type === DocumentType.FOLDER) {
        return this.searchText && this.document.name.toLowerCase().indexOf(this.searchText.toLowerCase()) !== -1;
      } else {
        return this.searchText;
      }
    },
    isFolder() {
      return this.document.type === DocumentType.FOLDER;
    },
    nextPage() {
      return this.partialSubList?.length !== this.subList?.length;
    },
  },
  destroyed() {
    IdCount = -1;
    eventBus.off('resetIdCount', this.cbId);
    eventBus.off('dialogDocument', this.dcId);
  },
  watch:{
    documentList:{
      handler() {
        this.updateKey++;
        this.updateSubList();
      },
      immediate: true
    },
    searchText: {
      handler(val) {
        if (val && this.collapse) {
          this.collapse = false;
        }
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.doc-element {
  display: flex;
  flex-direction: column;
  padding: 1px 0;
}

.doc-element-content {
  display: flex;
  height: 40px;
  align-items: center;
}

.doc-element-content:hover{
  background-color: var(--bg-color3);
}

.selected-doc {
  background-color: var(--bg-color3);
}

.selected-doc:hover {
  background-color: var(--bg-color4);
}

.preview-img-wrap {
  flex: 0 0 55px;
  height: 32px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-img-wrap > .preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.doc-info {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.doc-element-disable {
  background-color: white;
  opacity: 0.3;
  cursor: default;
}

.doc-indent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  flex-shrink: 0;
}

.img-grid {
  display: inline-block;
  object-fit: cover;
}

.img-placeholder {
  object-fit: contain;
}
</style>
